<template>
  <div id="persontaps">
    <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
      <el-tab-pane label="小学" name="first">
        <hope-diamond
          :learnSectionAndCount="learnSectionAndCount"
          :hopelist="hopelist"
          @readmore="show"
          ref="xiaoxue"
        />
      </el-tab-pane>
      <el-tab-pane label="初中" name="second">
        <hope-diamond
          :learnSectionAndCount="learnSectionAndCount"
          :hopelist="hopelist"
          @readmore="show"
        />
      </el-tab-pane>
      <el-tab-pane label="高中" name="third">
        <hope-diamond
          :learnSectionAndCount="learnSectionAndCount"
          :hopelist="hopelist"
          @readmore="show"
        />
      </el-tab-pane>
      <el-tab-pane label="大学" name="fourth">
        <hope-diamond
          :learnSectionAndCount="learnSectionAndCount"
          :hopelist="hopelist"
          @readmore="show"
        />
      </el-tab-pane>
      <el-tab-pane ref="stuDetail" label="学生详情" name="fifth" disabled
        ><student-detail :project="project"
      /></el-tab-pane>
      <el-tab-pane
        ref="stuDetail"
        label="修改学生信息"
        name="sixth"
        :disabled="isShow"
        ><change-stu-msg
      /></el-tab-pane>
      <el-tab-pane label="资助说明" name="seventh"
        ><description-of-fund
      /></el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {
  getPageData,
  getStudentList,
  getStudyInfo,
  getOtherInfoByRid,
  getStuBaseInfoById,
  getAwardIndoByRid
} from "network/charity";

// y引入简单介绍学生信息组件
import HopeDiamond from "./child/HopeDiamond.vue";
// 引入学生详情页组件
import StudentDetail from "./child/StudentDetail.vue";
// 引入修改学生信息组件
import ChangeStuMsg from "./child/ChangeStuMsg.vue";
// 引入资助说明组件
import DescriptionOfFund from "./child/DescriptionOfFund.vue";

//引入模拟数据
import { hopelist, learnStartList, project } from "./fackData";
export default {
  name: "PersonTaps",
  props: {
    isShow: {
      type: Boolean,
      default() {
        return true;
      }
    }
  },
  data() {
    return {
      activeName: "first",
      recipientId: "",
      project: project,
      hopelist: hopelist,
      learnStartList: learnStartList,
      learnSectionAndCount: {
        totalCount: 1000,
        type: "小学"
      }
      //分页数据
    };
  },
  methods: {
    /**
     * @author 代季盖
     * @function tab页面跳转，以及请求不同学段数据
     */
    handleClick(tab, event) {
      let _this = this;
      // 美化路由
      this.$router.push({});
      if (this.activeName == "first") {
        // 发送请求得到分页数据和第一页小学生的数据
        // console.log("小学");
        _this.getStudentOfBaseInfo("小学");
      } else if (this.activeName == "second") {
        // 发送请求得到初中分页的数据和分页信息
        _this.getStudentOfBaseInfo("初中");
      } else if (this.activeName == "third") {
        // 发送请求得到初中分页的数据和分页信息
        _this.getStudentOfBaseInfo("高中");
      } else if (this.activeName == "fourth") {
        // 发送请求得到初中分页的数据和分页信息
        _this.getStudentOfBaseInfo("大学");
      } else {
      }
    },
    /**
     * @author 代季盖
     * @function getStudentOfBaseInfo 拿到学生基本信息以及分页数据
     * @param type 学生类型
     */
    getStudentOfBaseInfo(type) {
      let _this = this;
      new Promise(function(resolve, reject) {
        getPageData(type).then(res => {
          resolve(_this.getInfoOfBase(type, res));
          reject(err => {
            console.error(err);
          });
        });
      });
    },
    /**
     * @author 代季盖
     * @function 拿到不同学段学生的第一页基本信息
     * @param type 学段
     * @param totalCount 不同学段学生的所有数据条数，用于分页
     */
    getInfoOfBase(type, totalCount) {
      let _this = this;
      _this.learnSectionAndCount = {
        type,
        totalCount
      };
      // 拿到指定类型学生的前六条数据
      getStudentList(type, 1).then(res => {
        // console.log(res);
        if (res.length) {
          res.forEach(element => {
            element.imgSrc = require("assets/image/charity/personDonation/carousel/carousel1.png");
          });
          _this.hopelist = res;
        } else {
          _this.hopelist = _this.learnStartList;
        }
      });
    },
    /**
     * @author 代季盖
     * @function 接收学生基本信息，传递到学生详情页面渲染(监听readmore事件)，readmore自定义事假
     * @param res 指定学生基本信息数据
     */
    show(res) {
      this.$router.push({
        query: {
          id: res.recipientId
        }
      });
      // 可以接收学生的详细信息，不用在单独发请求
      const _this = this;
      // console.log(res);
      // 传递学生基本信息到详情页
      _this.project.splice(1, 1, res);
      this.getAllInfo(res.recipientId);
    },
    /**
     * 得到学生详情页信息
     */
    getAllInfo(id) {
      let _this = this;
      new Promise(function(resolve, reject) {
        _this.recipientId = id;
        getStudyInfo(_this.recipientId).then(res => {
          // console.log(res);
          _this.project.splice(2, 1, res);
          _this.activeName = "fifth";
          _this.getAwardIndoByRid(_this.recipientId);
          resolve(_this.getOtherInfoByRid(_this.recipientId));
        });
      });
    },
    /**
     * @function 指定学生编号拿到获奖信息
     */
    getAwardIndoByRid(recipientId) {
      let _this = this;
      getAwardIndoByRid(recipientId).then(res => {
        // console.log(res);
        // if(res.length)
        _this.project.splice(4, 1, res);
      });
    },
    /**
     * @author DJG
     * @function 得到学生其它信息传递到学生详情tab
     */
    getOtherInfoByRid(recipientId) {
      const _this = this;
      getOtherInfoByRid(recipientId).then(res => {
        // console.log(res);
        // if(res){}
        _this.project.splice(3, 1, res);
      });
    },
    /**
     * @function 判断首页跳转到学生详情页
     */
    isHomeDetail() {
      let _this = this;
      let rId = this.$route.query.id;
      if (rId) {
        getStuBaseInfoById(rId).then(res => {
          if (res.basicInformationDonation) {
            _this.project.splice(1, 1, res.basicInformationDonation);
            this.getAllInfo(rId);
          } else {
            this.$message({
              showClose: true,
              message: "请检查编号输入是否有误！",
              type: "warning"
            });
            this.$router.replace("");
          }
        });
      }
    }
  },

  components: {
    HopeDiamond,
    StudentDetail,
    ChangeStuMsg,
    DescriptionOfFund
  },

  computed: {},

  beforeMount() {},

  mounted() {},

  created() {
    // 请求小学阶段第一页的基本信息
    this.getStudentOfBaseInfo("小学");
    this.isHomeDetail();
    // 监听搜索事件
    this.bus.$on("searchByRid", id => {
      if (id) {
        getStuBaseInfoById(id).then(res => {
          if (res.basicInformationDonation) {
            this.project.splice(1, 1, res.basicInformationDonation);
            this.getAllInfo(id);
          } else {
            this.$message({
              showClose: true,
              message: "请检查编号输入是否有误！",
              type: "warning"
            });
          }
        });
      }
    });
  },
  watch: {
    // 监听当前激活tab状态，传递title
    /**
     * @author 代季盖
     */
    activeName() {
      if (this.activeName === "first") {
        this.project.splice(0, 1, {
          name: "雏鹰计划",
          money: "4000.00"
        });
      } else if (this.activeName === "second") {
        this.project.splice(0, 1, {
          name: "初中",
          money: "4000.00"
        });
      } else if (this.activeName === "third") {
        this.project.splice(0, 1, {
          name: "高中",
          money: "4000.00"
        });
      } else if (this.activeName === "fourth") {
        this.project.splice(0, 1, {
          name: "大学",
          money: "4000.00"
        });
      } else {
      }
    }
  }
};
</script>
<style scoped lang="scss">
/deep/ .el-tabs--border-card > .el-tabs__header .el-tabs__item {
  font-size: var(--font-size-title);
  font-weight: bold;
}
#persontaps {
  height: 100%;
}
.el-tabs {
  height: 100%;
}
</style>
